<template>
  <div>
    <div class="flex justify-between">
      <SourceSearchForm @form="handlerSearch"></SourceSearchForm>
      <div class="btn-wrapper">
        <Button v-per="'add'" type="primary" @click="createHandler">添加数据源 </Button>
        <Button v-per="'manageConfig'" @click="openConfig" style="margin-left: 10px">数据源规格管理 </Button>
      </div>
    </div>
    <Table
      size="large"
      :scroll="scroll"
      :columns="sourcecolumns"
      :data-source="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      bordered
      sticky
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span class="flex justify-center">
            <span v-per="'update'">
              <a @click="updateHandler(record)" v-if="!(record.isUsed === '是' ? true : false)"
                >{{ ButtonEnum.EDIT }}<Divider type="vertical"
              /></a>
            </span>
            <span v-per="'test'">
              <a @click="testHandler(record)">{{ ButtonEnum.TEST }}</a>
            </span>

            <span v-per="'delete'">
              <a @click="deleteHandler(record)" v-if="!(record.isUsed === '是' ? true : false)"
                ><Divider type="vertical" />{{ ButtonEnum.DELETE }}</a
              >
            </span>
          </span>
        </template>
      </template>
    </Table>
    <DatasourceModal ref="createRef" @success="handleSuccess"></DatasourceModal>
    <UpdateModal ref="updateRef" @success="handleSuccess"></UpdateModal>
    <TestModal ref="testRef" @success="handleSuccess"></TestModal>
    <ConfigDrawer ref="configRef" />
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable */
import { searchFormSchema } from './data';
import { sourcecolumns } from './data';
import { Button, Divider } from 'ant-design-vue';
import { Table, TableProps } from 'ant-design-vue';
import DatasourceModal from './datasourceModal.vue';
import UpdateModal from './updateModal.vue';
import TestModal from './TestModal.vue';
import { deleteDataSource, getSourceList } from '/@/api/system-mgmt/source-mgmt/source';
import { useMessage } from '/@/hooks/web/useMessage';
import { computed, onMounted, ref } from 'vue';
import SourceSearchForm from '/@/views/system-mgmt/source-mgmt/sourceSearchForm.vue';
import ConfigDrawer from '/@/views/system-mgmt/source-mgmt/ConfigDrawer.vue';
import { ButtonEnum } from '/@/enums/buttonEnum';
let searchParams = ref({});
const createRef = ref();
const updateRef = ref();
const testRef = ref();

const scroll = ref<undefined | object>(undefined);
const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');
const pagination = computed(() => ({
  showSizeChanger: true,
  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

const { createMessage } = useMessage();

function updateHandler(record: Recordable) {
  updateRef.value.showModal(record);
}

function testHandler(record: Recordable) {
  testRef.value.showModal(record);
}

async function deleteHandler(record: Recordable) {
  const res = await deleteDataSource({ rdsId: record.id });
  if (res === '删除数据源信息成功！') {
    createMessage.success(res);
  } else {
    createMessage.error(res);
  }
  handlerSearch();
}

const handleTableChange: TableProps['onChange'] = (pag) => {
  current.value = pag.current;
  size.value = pag.pageSize;
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getSourceList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res.items;
    total.value = res.total;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

const handlerSearch = (params: any) => {
  searchParams.value = params;
  getSourceList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res.items;
    total.value = res.total;
  });
};
onMounted(() => {
  handlerSearch();
});

function createHandler() {
  createRef.value.showModal();
}
function handleSuccess() {
  handlerSearch();
}

const configRef = ref();
const openConfig = () => {
  configRef.value.openConfigDrawer();
};
</script>
<style lang="less">
.btn-wrapper {
  float: right;
}
</style>
